<template>
  <a-card :bodyStyle="{ padding: '10px' }">
    <el-card :body-style="{ padding: '4px' }" style="min-height: 42px;margin-bottom: 7px;" shadow="hover">
      <el-row>
        <el-col :span="24" style="display: flex;">
          <json-view :template="template" />
          <div class="hiprint-printPagination" style="height: 35px;"></div>
          <el-select v-model="paperType" placeholder="请选择" @change="changePaper" style="width: 70px; margin-right: 8px;">
            <el-option v-for="item in ['A3', 'A4', 'A5', 'B3', 'B4', 'B5']" :key="item" :label="item" :value="item">
              <span style="float: left">{{ item }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ value }}</span>
            </el-option>
          </el-select>
          <div style="display: block;float: right;">

            <el-popover placement="bottom-start" :width="360" trigger="click" ref="popoverSH">
              <template #reference>
                <el-button type="info" @click="paperPopVisible = !paperPopVisible">
                  <i class="el-icon-user-solid"></i>&nbsp;&nbsp; 自定义
                  <a-icon type="close" />
                </el-button>
              </template>
              <el-card :body-style="{ padding: '10px' }" style="height: 110px;width:335px;" shadow="hover">
                <el-input-number v-model="paperWidth" style="margin-bottom: 20px;margin-right: 12px;"></el-input-number>
                <el-input-number v-model="paperHeight"></el-input-number>
                <el-button type="primary" @click="otherPaper" style="float: right;">
                  <i class="el-icon-success"></i>&nbsp;&nbsp; 确 定
                </el-button>
              </el-card>
            </el-popover>

            <el-button type="info" style="width: 36px;" @click="changeScale(false)" plain ><i class="el-icon-minus"></i></el-button>

            <el-input placeholder="请输入密码" style="width:70px;margin-left: 5px;margin-right: 5px;" :value="scaleValueFormat"
              :disabled="true"></el-input>

            <el-button type="warning" style="width: 36px;" @click="changeScale(true)" plain><i class="el-icon-plus"></i></el-button>
            <el-button type="warning" @click="rotatePaper">
              <i class="el-icon-refresh"></i>&nbsp;&nbsp; 旋 转
            </el-button>
            <!-- <el-button type="info" @click="preView">
            <i class="el-icon-view"></i>&nbsp;&nbsp; 预 览
          </el-button> -->
            <a-popconfirm title="是否确认清空?" okType="danger" okText="确定清空" @confirm="clearPaper">
              <el-button type="danger">
                <i class="el-icon-delete"></i>&nbsp;&nbsp; 清 空
                <a-icon type="close" />
              </el-button>
            </a-popconfirm>
            <el-button type="success" @click="saveTemplate">
              <i class="el-icon-upload"></i>&nbsp;&nbsp; 保 存
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-row :gutter="0">
      <el-col :span="24" style="display: flex;">
        <el-card style="height: 66px;min-width:135px;max-width: 135px;" shadow="hover">
          <el-row style="  font-size: 16px; font-weight: bold;">打印数据源</el-row>
        </el-card>

        <el-card style="margin-bottom: 10px;margin-left: 10px;height: 66px; width: 100%;"
          :body-style="{ padding: '4px', margin: '3px' }" shadow="hover">
          <el-input v-model="source" type="textarea" :autosize="{ minRows: 2, maxRows: 2 }" placeholder="导出数据源！目前支持"
            allow-clear />
        </el-card>
      </el-col>
    </el-row>


    <el-row :gutter="3">
      <el-col :span="24" style="display: flex;">
        <el-card style="height: 680px; min-width: 250px;max-width: 250px;margin-right: 8px;" shadow="hover"
          :body-style="{ padding: '3px' }">
          <div class="div_panel">
            <el-row>
              <el-col :span="24" class="rect-printElement-types hiprintEpContainer">
                <el-row class="drag_item_title">拖拽组件列表</el-row>
                <el-row style="height: 43px;">
                  <el-col :span="12" class="drag_item_box">
                    <div>
                      <a class="ep-draggable-item" tid="defaultModule.text" style>&nbsp;&nbsp;文本</a>
                    </div>
                  </el-col>
                  <el-col :span="12" class="drag_item_box">
                    <div>
                      <a class="ep-draggable-item" tid="defaultModule.image" style>&nbsp;&nbsp;图片</a>
                    </div>
                  </el-col>
                </el-row>
                <el-row style="height: 43px;">
                  <el-col :span="12" class="drag_item_box">
                    <div>
                      <a class="ep-draggable-item" tid="defaultModule.longText">&nbsp;&nbsp;长文</a>
                    </div>
                  </el-col>
                  <el-col :span="12" class="drag_item_box">
                    <div>
                      <a class="ep-draggable-item" tid="defaultModule.emptyTable" style>&nbsp;&nbsp;表格</a>
                    </div>
                  </el-col>
                </el-row>
                <el-row style="height: 43px;">
                  <el-col :span="12" class="drag_item_box">
                    <div>
                      <a class="ep-draggable-item" tid="defaultModule.qrcode">&nbsp;&nbsp;二维码</a>
                    </div>
                  </el-col>
                  <el-col :span="12" class="drag_item_box">
                    <div>
                      <a class="ep-draggable-item" tid="defaultModule.barcode" style>&nbsp;&nbsp;条形码</a>
                    </div>
                  </el-col>
                </el-row>
                <el-row style="height: 43px;">
                  <el-col :span="12" class="drag_item_box">
                    <div>
                      <a class="ep-draggable-item" tid="defaultModule.html" style="">&nbsp;&nbsp;html</a>
                    </div>
                  </el-col>
                  <el-col :span="12" class="drag_item_box">
                    <div>
                      <a class="ep-draggable-item" tid="defaultModule.customText" style>&nbsp;&nbsp;个性</a>
                    </div>
                  </el-col>
                </el-row>
                <el-row class="drag_item_title">辅助</el-row>
                <el-row style="height: 43px;">
                  <el-col :span="12" class="drag_item_box">
                    <div>
                      <a class="ep-draggable-item" tid="defaultModule.hline" style>&nbsp;&nbsp;横线</a>
                    </div>
                  </el-col>
                  <el-col :span="12" class="drag_item_box">
                    <div>
                      <a class="ep-draggable-item" tid="defaultModule.vline" style>&nbsp;&nbsp;竖线</a>
                    </div>
                  </el-col>
                </el-row>
                <el-row style="height: 43px;">
                  <el-col :span="12" class="drag_item_box">
                    <div>
                      <a class="ep-draggable-item" tid="defaultModule.rect">&nbsp;&nbsp;矩形</a>
                    </div>
                  </el-col>
                  <el-col :span="12" class="drag_item_box">
                    <div>
                      <a class="ep-draggable-item" tid="defaultModule.oval">&nbsp;&nbsp;椭圆</a>
                    </div>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <div class="div_design" style="height: 680px;overflow: auto; min-width: 950px;margin-right: 8px;">
          <el-card class="card-design scrollbar">
            <div id="hiprint-printTemplate" class="hiprint-printTemplate"></div>
          </el-card>
        </div>
        <el-card style="height: 680px;width: 100%;" shadow="hover">
          <div class="div_panel scrollbar">
            <div id="PrintElementOptionSetting"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 预览 -->
    <print-preview ref="preView" />
  </a-card>
</template>

<script>
import { defaultElementTypeProvider } from '../../hiprint/hiprint.bundle.js'
import panel from './panel'
import printPreview from "@/components/basic/preview.vue"
import fontSize from "./font-size.js";
import scale from "./scale.js";

let hiprintTemplate;

export default {
  name: "printDesign",
  components: { printPreview },
  data() {
    return {
      paperType: "A4",
      printTemplate: {},
      source: '',
      table: '',
      id: 0,
      template: null,
      curPaper: {
        type: 'A4',
        width: 210,
        height: 296.6
      },
      paperTypes: {
        'A3': {
          width: 420,
          height: 296.6
        },
        'A4': {
          width: 210,
          height: 296.6
        },
        'A5': {
          width: 210,
          height: 147.6
        },
        'B3': {
          width: 500,
          height: 352.6
        },
        'B4': {
          width: 250,
          height: 352.6
        },
        'B5': {
          width: 250,
          height: 175.6
        }
      },
      // 自定义纸张
      paperPopVisible: false,
      paperWidth: '220',
      paperHeight: '80',
      // 缩放
      scaleValue: 1,
      scaleMax: 5,
      scaleMin: 0.5,
      // 导入导出json
      jsonIn: '',
      jsonOut: '',
    }
  },
  computed: {
    curPaperType() {
      let type = 'other'
      let types = this.paperTypes
      for (const key in types) {
        let item = types[key]
        let { width, height } = this.curPaper
        if (item.width === width && item.height === height) {
          type = key
        }
      }
      return type
    },
    scaleValueFormat() {
      return `${(this.scaleValue * 100).toFixed(0)}%`;
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    saveTemplate() {
      let param = {
        Template: JSON.stringify(hiprintTemplate.getJson() || {}),
        TableName: this.table,
        DataSource: this.source,
        Enable: 1,
        DeletionFlag: 0,
        id: this.id
      };
      console.log("Save——template", param);
      this.http.post(`/api/PrintTemplate/SaveTemplate`, param, true).then((x) => {
        if (x.status)
          this.$message.success('保存成功')
      });
    },
    init() {
      hiprint.init({
        providers: [new defaultElementTypeProvider()]
      });
      // 还原配置
      hiprint.setConfig()
      // 替换配置
      hiprint.setConfig({
        optionItems: [
          fontSize,
          scale,
          function () {
            function t() {
              this.name = "zIndex";
            }

            return t.prototype.css = function (t, e) {
              if (t && t.length) {
                if (e) return t.css('z-index', e);
              }
              return null;
            }, t.prototype.createTarget = function () {
              return this.target = $('<div class="hiprint-option-item">\n        <div class="hiprint-option-item-label">\n        元素层级2\n        </div>\n        <div class="hiprint-option-item-field">\n        <input type="number" class="auto-submit"/>\n        </div>\n    </div>'), this.target;
            }, t.prototype.getValue = function () {
              var t = this.target.find("input").val();
              if (t) return parseInt(t.toString());
            }, t.prototype.setValue = function (t) {
              this.target.find("input").val(t);
            }, t.prototype.destroy = function () {
              this.target.remove();
            }, t;
          }(),
        ],
        movingDistance: 2.5,
        text: {
          tabs: [
            // 隐藏部分
            {
              // name: '测试', // tab名称 可忽略
              options: [] // 必须包含 options
            },// 当修改第二个 tabs 时,必须把他之前的 tabs 都列举出来.
            {
              name: '样式', options: [
                {
                  name: 'scale',
                  after: 'transform', // 自定义参数，插入在 transform 之后
                  hidden: false
                },
              ]
            }
          ],
          supportOptions: [
            {
              name: 'styler',
              hidden: true
            },
            {
              name: 'scale', // 自定义参数，supportOptions 必须得添加
              after: 'transform', // 自定义参数，插入在 transform 之后
              hidden: false
            },
            {
              name: 'formatter',
              hidden: true
            },
          ]
        },
        image: {
          tabs: [
            {
              // 整体替换
              replace: true,
              name: '基本', options: [
                {
                  name: 'field',
                  hidden: false
                },
                {
                  name: 'src',
                  hidden: false
                },
                {
                  name: 'fit',
                  hidden: false
                }
              ]
            },
          ],
        }
      })
      // eslint-disable-next-line no-undef
      hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
      $('#hiprint-printTemplate').empty()
      let that = this;
      this.table = this.$route.query.table;

      this.http.get(`/api/PrintTemplate/GetTemplate/${this.table}`, {}, true)
        .then((x) => {
          if (!x.status) return this.$message.error(x.message);
          if (x.data && x.data.id) {
            this.printTemplate = JSON.parse(x.data.template);
            this.source = x.data.dataSource;
            this.id = x.data.id;
          }

          this.template = hiprintTemplate = new hiprint.PrintTemplate({
            template: this.printTemplate,
            defaultPanelName: '模板',
            onPanelAddClick: (panel, createPanel) => {
              panel.name = '模板' + (panel.index + 1);
              createPanel(panel);
            },
            // 图片选择功能
            onImageChooseClick: (target) => {
              target.getValue()
              target.refresh(url)
            },
            // 自定义可选字体
            // 或者使用 hiprintTemplate.setFontList([])
            // 或元素中 options.fontList: []
            fontList: [
              { title: '微软雅黑', value: 'Microsoft YaHei' },
              { title: '黑体', value: 'STHeitiSC-Light' },
              { title: '思源黑体', value: 'SourceHanSansCN-Normal' },
              { title: '王羲之书法体', value: '王羲之书法体' },
              { title: '宋体', value: 'SimSun' },
              { title: '华为楷体', value: 'STKaiti' },
              { title: 'cursive', value: 'cursive' },
            ],
            dataMode: 1, // 1:getJson 其他：getJsonTid 默认1
            history: true, // 是否需要 撤销重做功能
            onDataChanged: (type, json) => {
              console.log(type); // 新增、移动、删除、修改(参数调整)、大小、旋转
              console.log(json); // 返回 template
            },
            onUpdateError: (e) => {
              console.log(e);
            },
            settingContainer: '#PrintElementOptionSetting',
            paginationContainer: '.hiprint-printPagination'
          });
          hiprintTemplate.design('#hiprint-printTemplate', { grid: true });
          // 获取当前放大比例, 当zoom时传true 才会有
          this.scaleValue = hiprintTemplate.editingPanel.scale || 1;
        });

    },
    changePaper() {
      this.setPaper(this.paperType, this.paperTypes[this.paperType]);
    },
    /**
     * 设置纸张大小
     * @param type [A3, A4, A5, B3, B4, B5, other]
     * @param value {width,height} mm
     */
    setPaper(type, value) {
      console.log("setPaper", type, value);
      try {
        if (Object.keys(this.paperTypes).includes(type)) {
          this.curPaper = { type: type, width: value.width, height: value.height }
          hiprintTemplate.setPaper(value.width, value.height)
        } else {
          this.curPaper = { type: 'other', width: value.width, height: value.height }
          hiprintTemplate.setPaper(value.width, value.height)
        }
      } catch (error) {
        this.$message.error(`操作失败: ${error}`)
      }
    },
    otherPaper() {
      let value = {}
      value.width = this.paperWidth
      value.height = this.paperHeight
      this.$refs.popoverSH.hide()
      this.setPaper('other', value)
    },
    changeScale(big) {
      let scaleValue = this.scaleValue;
      if (big) {
        scaleValue += 0.1;
        if (scaleValue > this.scaleMax) scaleValue = 5;
      } else {
        scaleValue -= 0.1;
        if (scaleValue < this.scaleMin) scaleValue = 0.5;
      }
      if (hiprintTemplate) {
        // scaleValue: 放大缩小值, false: 不保存(不传也一样), 如果传 true, 打印时也会放大
        hiprintTemplate.zoom(scaleValue);
        this.scaleValue = scaleValue;
      }
    },
    rotatePaper() {
      if (hiprintTemplate) {
        hiprintTemplate.rotatePaper()
      }
    },
    preView() {
      // 测试, 点预览更新拖拽元素
      hiprint.updateElementType('defaultModule.text', (type) => {
        type.title = '这是更新后的元素';
        return type
      })
      // 测试, 通过socket刷新打印机列表； 默认只有连接的时候才会获取到最新的打印机列表
      hiprint.refreshPrinterList((list) => {
        console.log('refreshPrinterList')
        console.log(list)
      });
      // 测试, 获取IP、IPV6、MAC地址、DNS
      // 参数格式：
      // 1. 类型（ip、ipv6、mac、dns、all、interface、vboxnet）
      // 2. 回调 data => {addr, e}  addr: 返回的数据 e:错误信息
      // 3. 其他参数 ...args
      // hiprint.getAddress('ip', (data) => {
      //   console.log('ip')
      //   console.log(data)
      // })
      // hiprint.getAddress('ipv6', (data) => {
      //   console.log('ipv6')
      //   console.log(data)
      // })
      // hiprint.getAddress('mac', (data) => {
      //   console.log('mac')
      //   console.log(data)
      // })
      // hiprint.getAddress('dns', (data) => {
      //   console.log('dns')
      //   console.log(data)
      // })
      // hiprint.getAddress('all', (data) => {
      //   console.log('all')
      //   console.log(data)
      // })
      // // 各个平台不一样, 用法见: https://www.npmjs.com/package/address
      // hiprint.getAddress('interface', (data) => {
      //   console.log('interface')
      //   console.log(data)
      // }, 'IPv4', 'eth1')
      this.$refs.preView.show(hiprintTemplate, printData, "")
    },
    onlyPrint() {
      let hiprintTemplate = this.$print(undefined, panel, printData, {}, {
        styleHandler: () => {
          let css = '<link href="http://hiprint.io/Content/hiprint/css/print-lock.css" media="print" rel="stylesheet">';
          return css
        }
      })
      console.log(hiprintTemplate);
    },
    onlyPrint2() {
      let that = this;
      if (window.hiwebSocket.opened) {
        let hiprintTemplate = this.$print2(undefined, panel, printData, {
          printer: '', title: 'Api单独打印',
          styleHandler: () => {
            // let css = '<link href="http://hiprint.io/Content/hiprint/css/print-lock.css" media="print" rel="stylesheet">';
            let css = '<style>.hiprint-printElement-text{color:red !important;}</style>'
            return css
          }
        })
        let key = 'Api单独直接打印';
        hiprintTemplate.on('printSuccess', function () {
          that.$notification.success({
            key: key,
            placement: 'topRight',
            message: key + ' 打印成功',
            description: 'Api单独直接打印回调',
          });
        });
        return;
      }
      this.$message.error('客户端未连接,无法直接打印')
    },
    print() {
      if (window.hiwebSocket.opened) {
        const printerList = hiprintTemplate.getPrinterList();
        console.log(printerList)
        hiprintTemplate.print2(printData, { printer: '', title: 'hiprint测试打印' });
        return
      }
      this.$message.error('客户端未连接,无法直接打印')
    },
    clearPaper() {
      try {
        hiprintTemplate.clear();
      } catch (error) {
        this.$message.error(`操作失败: ${error}`);
      }
    },
    exportPdf(type) {
      hiprintTemplate.toPdf(printData, '测试导出pdf', { isDownload: false, type: type }).then((res) => {
        console.log('type:', type);
        console.log(res);
      });
    },
    ippPrintAttr() {
      // 不知道打印机 ipp 情况， 可通过 '客户端' 获取一下
      const printerList = hiprintTemplate.getPrinterList();
      console.log(printerList)
      if (!printerList.length) return;
      let p = printerList[0];
      console.log(p)
      // 系统不同， 参数可能不同
      let url = p.options['printer-uri-supported'];
      // 测试 获取 ipp打印 支持参数
      hiprint.ippPrint({
        url: url,
        // 打印机参数： {version,uri,charset,language}
        opt: {},
        action: 'Get-Printer-Attributes', // 获取打印机支持参数
        // ipp参数
        message: null,
      }, (res) => {
        // 执行的ipp 任务回调 / 错误回调
        console.log(res)
      }, (printer) => {
        // ipp连接成功 回调 打印机信息
        console.log(printer)
      })
    },
    ippPrintTest() {
      // 不知道打印机 ipp 情况， 可通过 '客户端' 获取一下
      const printerList = hiprintTemplate.getPrinterList();
      console.log(printerList)
      if (!printerList.length) return;
      let p = printerList[0];
      console.log(p)
      // 系统不同， 参数可能不同
      let url = p.options['printer-uri-supported'];
      // 测试 打印文本
      hiprint.ippPrint({
        url: url,
        // 打印机参数： {version,uri,charset,language}
        opt: {},
        action: 'Print-Job',
        // ipp参数
        message: {
          "operation-attributes-tag": {
            "requesting-user-name": "hiPrint", // 用户名
            "job-name": "ipp Test Job", // 任务名
            "document-format": "text/plain" // 文档类型
          },
          // data 需为 Buffer (客户端简单处理了string 转 Buffer), 支持设置 encoding
          // data 需为 Buffer (客户端简单处理了string 转 Buffer), 支持设置 encoding
          // data 需为 Buffer (客户端简单处理了string 转 Buffer), 支持设置 encoding
          // 其他 Uint8Array/ArrayBuffer   默认仅 使用 Buffer.from(data)
          // 其他 Uint8Array/ArrayBuffer   默认仅 使用 Buffer.from(data)
          // 其他 Uint8Array/ArrayBuffer   默认仅 使用 Buffer.from(data)
          // 其他 Uint8Array/ArrayBuffer   默认仅 使用 Buffer.from(data)
          data: 'test test test test test test test',
          encoding: 'utf-8' // 默认可不传
        }
      }, (res) => {
        // 执行的ipp 任务回调 / 错误回调
        console.log(res)
      }, (printer) => {
        // ipp连接成功 回调 打印机信息
        console.log(printer)
      })
    },
    // 自定义 ipp 请求
    ippRequestTest() {
      const printerList = hiprintTemplate.getPrinterList();
      console.log(printerList)
      if (!printerList.length) return;
      let p = printerList[0];
      console.log(p)
      // 系统不同， 参数可能不同
      let url = p.options['printer-uri-supported'];
      // 详见： https://www.npmjs.com/package/ipp
      hiprint.ippRequest({
        url: url,
        // 传入的数据 ipp.serialize 后 未做任何处理  打印内容 需要 Buffer
        // 传入的数据 ipp.serialize 后 未做任何处理  打印内容 需要 Buffer
        // 传入的数据 ipp.serialize 后 未做任何处理  打印内容 需要 Buffer
        data: {
          "operation": "Get-Printer-Attributes",
          "operation-attributes-tag": {
            // 测试发现 Request下列3个必须要有
            "attributes-charset": "utf-8",
            "attributes-natural-language": "zh-cn",
            "printer-uri": url
          }
        }
      }, (res) => {
        // 执行的ipp 任务回调 / 错误回调
        console.log(res)
      })
    },
    ippRequestPrint() {
      const printerList = hiprintTemplate.getPrinterList();
      console.log(printerList)
      if (!printerList.length) return;
      let p = printerList[0];
      console.log(p)
      // 系统不同， 参数可能不同
      let url = p.options['printer-uri-supported'];
      let str = "ippRequestPrint ippRequestPrint ippRequestPrint";
      let array = new Uint8Array(str.length);
      for (var i = 0; i < str.length; i++) {
        array[i] = str.charCodeAt(i);
      }
      let testData = array.buffer;
      // 详见： https://www.npmjs.com/package/ipp
      hiprint.ippRequest({
        url: url,
        // 传入的数据 ipp.serialize 后 未做任何处理  打印内容 需要 Buffer
        // 传入的数据 ipp.serialize 后 未做任何处理  打印内容 需要 Buffer
        // 传入的数据 ipp.serialize 后 未做任何处理  打印内容 需要 Buffer
        data: {
          "operation": "Print-Job",
          "operation-attributes-tag": {
            // 测试发现 Request下列3个必须要有
            "attributes-charset": "utf-8",
            "attributes-natural-language": "zh-cn",
            "printer-uri": url,
            "requesting-user-name": "hiPrint", // 用户名
            "job-name": "ipp Request Job", // 任务名
            "document-format": "text/plain" // 文档类型
          },
          data: testData
        }
      }, (res) => {
        // 执行的ipp 任务回调 / 错误回调
        console.log(res)
      })
    },
    updateJson() {
      if (hiprintTemplate) {
        try {
          hiprintTemplate.update(JSON.parse(this.jsonIn))
        } catch (e) {
          this.$message.error(`更新失败: ${e}`)
        }
      }
    },
    exportJson() {
      if (hiprintTemplate) {
        this.jsonOut = JSON.stringify(hiprintTemplate.getJson() || {})
      }
    },
    setElsAlign(e) {
      hiprintTemplate.setElsAlign(e)
    },
    setElsSpace(h) {
      hiprintTemplate.setElsSpace(10, h)
    },
    getSelectEls() {
      let els = hiprintTemplate.getSelectEls();
      console.log(els)
    },
    updateFontSize() {
      hiprintTemplate.updateOption('fontSize', 12);
    },
    updateFontWeight() {
      hiprintTemplate.updateOption('fontWeight', 'bolder');
    }
  }
}
</script>

<style lang="less" scoped>
.scrollbar {
  overflow: scroll;
}

/* 滚动条样式 */
.scrollbar::-webkit-scrollbar {
  width: 5px;
  /*  设置纵轴（y轴）轴滚动条 */
  height: 5px;
  /*  设置横轴（x轴）轴滚动条 */
}

/* 滚动条滑块（里面小方块） */
.scrollbar::-webkit-scrollbar-thumb {
  border-radius: 0px;
  background: transparent;
}

/* 滚动条轨道 */
.scrollbar::-webkit-scrollbar-track {
  border-radius: 0;
  background: transparent;
}

/* hover时显色 */
.scrollbar:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}

.scrollbar:hover::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}



a {
  background: #f0f9eb;
  cursor: move;
  color: rgba(39, 38, 38, .9333333333333333);
  float: left;
  width: 100px;
  text-align: center;
  border: 1px solid #eee;
  padding: 1px 1px !important;
  text-align: left;
  line-height: 31px;
  margin: 1px;
  border-radius: 3px;
  background: #f0f9eb;
  height: 33px;
  padding: 1px 1px;
  font-size: 15px;
  box-shadow: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.div_panel {
  height: 650px;
  overflow: auto;
}

.el-button {
  width: 100px;
}

// 拖拽
.drag_item_box {
  height: 100%;
  padding: 2px;
}

.drag_item_box>div {
  background-color: #fff;
  display: flex;
  justify-content: right;
  align-items: left;
}

.drag_item_box>div>a {
  text-align: left;
  text-decoration-line: none;
}

.drag_item_box>div>a>span {
  font-size: 28px;
}

.drag_item_box>div>a>p {
  margin: 10;
}

.drag_item_title {
  font-size: 16px;
  padding: 1px 1px 0 1px;
  font-weight: bold;
}

// 默认图片
/deep/ .hiprint-printElement-image-content {
  img {
    content: url("~@/assets/imgs/logo.png");
  }
}

// 辅助线样式
/deep/ .toplineOfPosition {
  border: 0;
  border-top: 1px dashed purple;
}

/deep/ .bottomlineOfPosition {
  border: 0;
  border-top: 1px dashed purple;
}

/deep/ .leftlineOfPosition {
  border: 0;
  border-left: 1px dashed purple;
}

/deep/ .rightlineOfPosition {
  border: 0;
  border-left: 1px dashed purple;
}

// 设计容器
.card-design {
  //overflow: hidden;
  overflow: auto;
  height: 100%;
}
</style>
